<template>
	<s-layout title="社群" color="#333" navbar="inner1" :bgStyle="{
      src: theme.background_image,
      color: '#f3f5f4',
    }" onShareAppMessage>
		<assNavbar title="我的发布" />
		<assList :listHeight="screenHeight" :switchList="state.talkSwitchList" @listSwitch="talkChange"
			@scrollLower="getTalkList">
			<view style="padding-bottom: 25rpx">
				<view class="talkList-item" v-for="(talk,index) in state.talkList" :key="talk.id">
					<view class="talkList-item-content ss-flex">
						<!-- 问答 只有图片 -->
						<img :src="cdnUrl(talk.image)" alt="" v-if="talk.label === 'questions'">
						<!-- 其他 先判断是否是视频  是视频 展示封面   不是视频 展示image -->
						<image :src="isVideo(talk.image) ? cdnUrl(talk.cover) : cdnUrl(talk.image)" mode="aspectFill" v-else></image>
						<view class="talk-info ss-flex-1 ss-flex-col ss-row-between">
							<view class="talk-title ss-line-1">{{ talk.title }}</view>
							<assIcon v-if="talk.label" class="talk-icon" :type="talk.label"></assIcon>
							<view class="talk-data ss-flex ss-row-between">
								<view>累计浏览{{ formatCharCount(talk.view) || 0 }}</view>
								<view>累计参与{{ formatCharCount(talk.number) || 0 }}</view>
								<view>累计转发{{ formatCharCount(talk.forward) || 0 }}</view>
							</view>
							<view class="talk-data ss-flex ss-row-between">
								<view class="ss-flex">今日浏览<view :style="{ color: theme.main_color }">
										{{ formatCharCount(talk.today_view) || 0 }}
									</view>
								</view>
								<view class="ss-flex">今日参与<view :style="{ color: theme.main_color }">
										{{ formatCharCount(talk.today_number) || 0 }}
									</view>
								</view>
								<view class="ss-flex">今日转发<view :style="{ color: theme.main_color }">
										{{ formatCharCount(talk.today_forward) || 0 }}
									</view>
								</view>
							</view>
							<view class="talk-bottom ss-flex ss-row-between">{{ timeFormat(talk.updata) }}更新
							</view>
						</view>
					</view>
					<view class="talkList-item-btn ss-flex ss-row-right">
						<view class="detailBtn"
							:style="{ backgroundColor: theme.btn_background_color, color: theme.selected_color }"
							@click="jumpType(talk,index)">
							查看详情</view>
						<!-- <view class="upDateBtn" @click="
                sheep.$router.go('/association/pages/noteUpdate', { id: 11, find_id: talk.find_id })
              " v-if="talk.label == 'note'">更新</view> -->
						<view class="delBtn" @click="delFind(talk.find_id)">删除</view>
					</view>
				</view>
				<uni-load-more :status="state.listLoad"></uni-load-more>
			</view>
		</assList>
	</s-layout>
</template>

<script setup>
	import assIcon from '@/components/ass-icon.vue';
	import assNavbar from '@/components/ass-navbar.vue';
	import assList from '@/components/ass-list.vue';
	import API from '../api';
	import {
		formatCharCount,
		timeFormat,
		cdnUrl
	} from '@/association/utils';
	import association from '@/association/store';
	import {
		onLoad,
		onShow,
		onPageScroll,
		onUnload,
		onPullDownRefresh
	} from '@dcloudio/uni-app';
	import sheep from '@/sheep';
	import {
		computed,
		reactive
	} from 'vue';
	const template = computed(() => sheep.$store('app').template.user);
	const theme = computed(() => association().theme);

	const state = reactive({
		talkCategory: '',
		listLoad: 'more',
		page: 0,
		talkSwitchList: [],
		talkList: [],
	});
	// const screenHeight = computed(() => (sheep.$platform.device.screenHeight - 44 - sheep.$platform.device
	// 	.statusBarHeight - sheep.$platform.device.safeAreaInsets.bottom))


	const jumpType = (item, index) => {
		if (item.label === 'visit' || item.label === 'share') {
			if (isVideo(item.image)) {
				// 跳转视频
				sheep.$router.go('/association/pages/asvideos', {
					id: item.find_id,
					index: index,
					category_id: item.label === 'visit' ? '12' : '10'
				})
			} else {
				sheep.$router.go('/association/pages/find', {
					id: item.find_id,
					type: item.label,
				})
			}
		}

		if (item.label === 'questions') {
			sheep.$router.go('/association/pages/find', {
				id: item.find_id,
				type: item.label,
			})
		}
	}


	const isVideo = (link) => {
		const mp4 = /.*\.mp4$/;
		const MP4 = /.*\.MP4$/;
		return mp4.test(link) || MP4.test(link)
	}

	// 获取话题列表
	const getTalkList = async () => {
		if (state.listLoad == 'no-more') return;
		state.listLoad = 'loading';
		let data = {
			page: state.page + 1,
		};
		if (state.talkCategory !== '') data['category_id'] = state.talkCategory;
		const res = await API.myFindList(data);
		state.page = res.data.current_page;
		let list = res.data.data;
		if (state.page <= 1) {
			state.talkList = list;
		} else {
			state.talkList.push(...list);
		}
		state.listLoad = list.length >= 10 ? 'more' : 'no-more';
	};
	const talkChange = (e) => {
		console.log(e);
		state.listLoad = 'more';
		state.page = 0;
		state.talkCategory = e.id || '';
		getTalkList();
	};
	onPullDownRefresh(() => {
		getCategory();
		setTimeout(() => {
			uni.stopPullDownRefresh();
		}, 300);
	});
	onUnload(() => {
		uni.stopPullDownRefresh();
	});
	// 获取话题/发现 二级分类
	const getCategory = async () => {
		let res = await API.getCategory({
			// 话题传 topic， 发现传 find
			type: 'find',
		});
		if (res.code) {
			let list = res.data.lists;
			list.unshift({
				name: '全部',
				id: '',
			});
			state.talkSwitchList = list;
			getTalkList();
		}
	};

	const delFind = async (id) => {
		uni.showModal({
			title: '提示',
			content: '删除后无法恢复',
			success: async (res) => {
				if (res.confirm) {
					let res = await API.delFind({
						find_id: id,
					});
					if (res.code) {
						uni.showToast({
							icon: 'none',
							title: '删除成功',
							duration: 1000,
						});
						let index = '';
						index = state.talkList.findIndex((v) => v.find_id === id);
						state.talkList.splice(index, 1);
					}
				} else if (res.cancel) {
					// uni.showToast({
					// 	icon:'none',
					// 	title:'取消删除',
					// 	duration:1000
					// })
				}
			},
		});
	};
	const screenHeight = computed(
		() =>
		44 + sheep.$platform.device.statusBarHeight + sheep.$platform.device.safeAreaInsets.bottom,
	);

	onLoad(() => {
		getCategory();
	});
</script>

<style lang="scss" scoped>
	view {
		box-sizing: border-box;
	}

	.talkList-item {
		margin: 20rpx 20rpx 0;
		padding: 20rpx 20rpx 0;
		background-color: #fff;
		border-radius: 10rpx;

		.talkList-item-content {
			&>image {
				height: 176rpx;
				width: 176rpx;
				min-width: 176rpx;
				margin-right: 25rpx;
			}

			.talk-info {
				position: relative;
				height: 176rpx;
				max-height: 176rpx;
				color: #3d3d3d;

				.talk-icon {
					position: absolute;
					top: 0;
					right: 0;
				}

				.talk-title {
					width: 400rpx;
					font-size: 32rpx;
				}

				.talk-bottom {
					color: #666;
					font-size: 24rpx;

					&>view {
						width: 100rpx;
						height: 40rpx;
						font-size: 20rpx;
						border-radius: 20rpx;
						color: #1BBDCE;
						line-height: 40rpx;
						text-align: center;
						background: #b5f8ff;
					}
				}

				.talk-data {
					color: #666;
					font-size: 24rpx;

					&>view {
						width: 33%;

						&>view {
							display: inline-block;
							color: #0AD5EA;
						}
					}
				}
			}
		}

		.talkList-item-btn {
			padding: 10rpx 0;

			&>view {
				width: 130rpx;
				height: 50rpx;
				border-radius: 20rpx;
				font-size: 24rpx;
				line-height: 50rpx;
				text-align: center;
				margin-left: 20rpx;
			}

			.detailBtn {
				background: #b5f8ff;
				color: #1BBDCE;
			}

			.upDateBtn {
				color: #7a63ff;
				background-color: #e7e3fd;
			}

			.delBtn {
				color: #ff8b8b;
				background-color: #fee4e4;
			}
		}
	}
</style>